<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D变换_变换原点</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outer{
            width: 300px;
            height: 300px;
            border:2px solid black;
            margin: 800px;

        }
        .inner{
            width: 300px;
            height: 300px;
            background-color: deepskyblue;
            text-align: center;
            line-height: 300px;
            margin: auto;
            /*通过具体关键词改变旋转原点的位置*/
            /*transform-origin: top left;*/
            /*transform-origin: bottom right;*/

            /*通过像素值改变旋转原点的位置*/
            transform-origin: 50px 50px;

            /*
            需要注意的是,如果只写一个像素值,那么y轴默认就选择宽度的50%
            如果只给一个关键字值,那么就将原点从中点直接水平移动(top,bottom,left,right)

            变换原点位置的改变,对位移是没有影响的,对缩放是有影响的
            */

            transform: rotate(30deg);
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner">inner</div>
</div>

</body>
</html>